<template>
  <div class="addressOfPre-page">
    <a-card :bordered="false">
      <!-- 表格顶部搜索部分 -->
      <c-table-search-form
        v-model="tableSearchForm"
        :datas="tableSearchFormData"
        @onAdd="handleAdd('', 'add')"
      >
        <div slot="pageTab">
          <a-radio-group v-model="currentType" :style="{ marginBottom: '8px' }">
            <a-radio-button value="web"> 网页端</a-radio-button>
            <a-radio-button value="mobile"> 手机端</a-radio-button>
          </a-radio-group>
        </div>
      </c-table-search-form>
      <c-table
        showPagination
        :columns="tableColumns"
        :datas="tableData"
        :loading="loading"
        :paginationDatas="paginationDatas"
        @onPageSizeChange="onPageSizeChange"
        @onShowNumChange="onShowNumChange"
      >
        <!-- 表格自定义部分 -->
        <template slot="line" slot-scope="line">
          <span>{{
            line.tableRow === "1"
              ? "买家"
              : line.tableRow === "2"
              ? "卖家"
              : "买卖家"
          }}</span>
        </template>

        <!-- 表格操作按钮 -->
        <template slot="handle" slot-scope="row">
           <a @click="handleAdd(row.tableRow, 'edit')"><a-icon type="edit" /> 编辑</a>
           <a-divider type="vertical" />
          <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDel([row.tableRow.id])"
            v-if="row.tableRow.id >= 10"
          >
            <p slot="title">
              是否确定删除该轮播 ？
            </p>
            <a type="link"><a-icon type="delete" /> 删除</a>
          </a-popconfirm>
           <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDel([row.tableRow.id])"
            v-if="row.tableRow.id >= 10"
          >
           <a-divider type="vertical" />
            <p slot="title">
              是否确定上移该轮播 ？
            </p>
            <a type="link"><a-icon type="arrow-up" /> 上移</a>
            <a-divider type="vertical" />
          </a-popconfirm>
           <a-popconfirm
            ok-text="确定"
            cancel-text="取消"
            @confirm="handleDel([row.tableRow.id])"
            v-if="row.tableRow.id >= 10"
          >
            <p slot="title">
              是否确定下移该轮播 ？
            </p>
            <a type="link"><a-icon type="arrow-down" /> 下移</a>
          </a-popconfirm>

        </template>
      </c-table>

      <!-- 新增/编辑弹窗 -->
      <a-modal
        :title="openType === 'edit' ? '编辑轮播图' : '新增轮播图'"
        :visible="dialogVisible"
        width="30%"
        @cancel="handleCancel"
        :confirm-loading="confirmLoading"
        :destroyOnClose="true"
      >
        <c-form-model
          checkStrictly
          :datas="formEditData"
          v-model="form"
          :rules="rules"
          ref="formModels"
        ></c-form-model>
        <div class="drawer-footer-btn flex-center">
          <a-button class="margin-r10" @click="handleCancel">取消</a-button>
          <a-button type="primary" :loading="confirmLoading" @click="handleOk"
            >确定</a-button
          >
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserList } from "@/api/company/users";

export default {
  name: "AddressOfPre",
  components: {},
  data() {
    return {
      currentType: "web",
      dialogVisible: false,
      confirmLoading: false,
      rules: {
        title: [
          { required: true, message: "请输入轮播标题", trigger: "blur" }
        ],
        link: [
          { required: true, message: "请输入跳转链接", trigger: "blur" }
        ],
      },
      formEditData: [
        {
          label: "轮播标题",
          prop: "title",
        },
        {
          label: "跳转链接",
          prop: "link",
        },
        {
          label: "封面类型",
          prop: "type",
          type: "radio",
          typeData: [
            {
              label: "链接",
              value: "1"
            },
            {
              label: "图片",
              value: "2"
            }
          ]
        }
      ],
      form: {
        type:"1"
      },
      tableSearchForm: {},
      tableSearchFormData: [
        {
          prop: "pageTab",
          type: "slot"
        },
        {
          prop: "addBtn",
          type: "addBtn"
        }
      ],
      tableColumns: [
        {
          title: "排序",
          dataIndex: "userId",
          align: "center",
          width: 120
        },
        {
          title: "轮播标题",
          dataIndex: "line",
          align: "center",
          scopedSlots: { customRender: "line" }
        },
        {
          title: "跳转链接",
          dataIndex: "",
          align: "center"
        },
        {
          title: "最后更新时间",
          dataIndex: "",
          align: "center"
        },
        {
          title: "操作",
          key: "handle",
          scopedSlots: { customRender: "handle" },
          align: "center",
          width: 280
        }
      ],
      companyStatusArr: [
        {
          value: "",
          lable: "全部"
        },
        {
          value: "0",
          lable: "待审核"
        },
        {
          value: "1",
          lable: "已通过"
        },
        {
          value: "2",
          lable: "已拒绝"
        }
      ],
      openType: "add",
      companyStatus: "",
      tableData: [],
      paginationDatas: {
        pageSizeOptions: ["10", "20", "30", "40", "50","200","1000"],
        pageSize: 10,
        pageNum: 1,
        total: 0
      }
    };
  },
  computed: {
    ...mapState({})
  },
  created() {
    this.onPageOnlod();
  },
  mounted() {},
  methods: {
    onPageOnlod() {
      this.loading = true;
      getUserList({
        auditState: this.companyStatus ? Number(this.companyStatus) : "",
        pageData: {
          ...{
            pageSize: this.paginationDatas.pageSize,
            pageNum: this.paginationDatas.pageNum
          }
        }
      })
        .then(res => {
          this.tableData = res.data.pageData;
          this.paginationDatas.total = res.data.total;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onShowNumChange(val) {
      this.paginationDatas.pageNum = val;
      this.onPageOnlod();
    },
    onPageSizeChange(val) {
      this.paginationDatas.pageSize = val;
      this.onPageOnlod();
    },
    handleAdd(row, openType) {
      this.openType = openType;
      if (openType === "edit") {
        this.$nextTick(() => {
          this.form.origin = row.title;
          this.form.lineOperationList = [];
        });
      }
      this.dialogVisible = true;
    },

    handleCancel() {
      this.dialogVisible = false;
    },
    handleOk() {
      const that = this;
      let onFun;
      // that.handleType === "add"
      //   ? (onFun = addRoleTemplate)
      //   : (onFun = updateRoleTemplate);
      this.$refs.formModels.handleValidate().then(data => {
        that.confirmLoading = true;
        // onFun(data)
        //   .then(res => {
        //     that.$message.success("操作成功");
        //     that.deleteIdArr = [];
        //     that.selectedRowKeys = [];
        //     that.selectedRows = [];
        //     that.onPageOnlod();
        //     that.confirmLoading = false;
        //     that.visible = false;
        //   })
        //   .catch(() => {
        //     this.confirmLoading = false;
        //   });
      });
    },
    handleTestConnection() {}
  }
};
</script>

<style lang="less" scoped>
</style>
